<script setup lang="ts">
const { isHorizontal } = defineProps({
  color: {
    type: String,
    required: true,
    default: 'green'
  },
  isHorizontal: {
    type: Boolean,
    default: false
  }
});
</script>

<template>
  <div
    class="root"
    :style="{
      height: isHorizontal ? 'auto' : '138px',
      width: isHorizontal ? '138px' : 'auto',
      flexDirection: isHorizontal ? 'row' : 'column'
    }"
  >
    <div class="child">
      <div v-if="color === 'red'" class="light redLight"></div>
      <div v-else class="light noLight"></div>
    </div>
    <div class="child">
      <div v-if="color === 'yellow'" class="light yellowLight"></div>
      <div v-else class="light noLight"></div>
    </div>
    <div class="child">
      <div v-if="color === 'green'" class="light greenLight"></div>
      <div v-else class="light noLight"></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.root {
  background-color: #111111;
  border: 3px #443 solid;
  border-radius: 10px;
  display: flex;
  padding: 5px;
  overflow: hidden;
  justify-content: space-between;
  align-items: center;

  .light {
    border-radius: 50%;
    width: 36px;
    aspect-ratio: 1/1;
  }
}

.greenLight {
  background-color: #0d0;
  box-shadow: 0 0 40px #0d0;
}
.redLight {
  background-color: #ff0000;
  box-shadow: 0 0 40px #ff0000;
}

.yellowLight {
  background-color: yellow;
  box-shadow: 0 0 40px yellow;
}

.noLight {
  background-color: #443;
}
</style>
